<template>
  <div class="detail">
    <!-- 新增/修改文章 -->
    <el-card class="content" shadow="always">
      <div slot="header">
        <span>新增文章</span>
      </div>
      <el-form ref="form" :model="article" :rules="rules" label-width="80px" :inline="false" size="normal">
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="作者:" prop="author">
              <el-input v-model="article.author " placeholder="作者" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="文章:" prop="title">
              <el-input v-model="article.title " placeholder="文章" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="是否显示:">
              <el-tooltip>
                <el-switch
                  v-model="article.isShow "
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="文章概要:">
          <el-input
            v-model="article.summary "
            placeholder="请输入..."
            type="textarea"
            :rows="2"
          />
        </el-form-item>
        <el-form-item label="封面图片">
          <el-upload
            ref="upload"
            :headers="{token}"
            class="upload-demo"
            action="/lejuAdmin/material/uploadFileOssSave"
            :on-success="handleSuccess"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <img :src="article.coverImg" alt="">
        </el-form-item>

        <el-form-item label="文章管理:">
          <!-- 111 -->
          <Tinymce :height="400" />
        </el-form-item>

      </el-form>

    </el-card>

  </div>
</template>

<script>
import { getToken } from '@/utils/MyAuth'
import Tinymce from '@/components/Tinymce'
export default {
  components: {
    Tinymce
  },
  props: {

  },
  data() {
    return {
      value: 100,
      article: {
        isShow: 1,
        author: '',
        title: '',
        summary: '',
        coverImg: ''
      },
      rules: {
        author: [
          { required: true, message: '作者不能为空', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ]
      },
      fileList: []
    }
  },
  computed: {
    token() {
      return getToken()
    }
  },
  watch: {

  },
  created() {

  },
  mounted() {

  },
  methods: {
    handleSuccess(res, file, fileList) {
      // 上传成功返回数据
      console.log(res)
      const { message: errMsg, success, data } = res
      if (success) {
        const { ossUrl } = data.material
        console.log(ossUrl)
        this.article.coverImg = ossUrl
        // 清除上传列表
        this.$refs.upload.clearFiles()
      } else {
        this.$message.error(errMsg)
        console.log(111)
      }
      // console.log(file, fileList)
    }
  }
}
</script>

<style scoped lang="scss">
.detail{
  background-color: #eee;
  .content{
    margin-top: 20px;
  }
}
</style>
